@mixin translateX($x: 50%) {
  transform:translateX(#{$x});
  -webkit-transform:translateX(#{$x});
  -ms-transform:translateX(#{$x});
}

@mixin transitionS($property: all, $duration: 0.3s, $timing: ease) {
  transition-property:#{$property};
  transition-duration: $duration;
  transition-timing-function: $timing;
  -webkit-transition-property:#{$property};
  -webkit-transition-duration: $duration;
  -webkit-transition-timing-function: $timing;
  -ms-transition-property:#{$property};
  -ms-transition-duration: $duration;
  -ms-transition-timing-function: $timing;
}

@mixin bgcolor($color, $opacity) {
  $num: floor($opacity*255);
  $sixteen: tenToSixteen($num);
  $colorStr: '#'+$sixteen+str-slice('#{$color}', 2);
  filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#{$colorStr}', endColorstr='#{$colorStr}');
  background-color: rgba($color, $opacity);
}

.modal {
  position: fixed;
  left: 0;
  bottom: 0;
  // background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  z-index: 10090;
}

.msgWrap {
  z-index: 99999;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  pointer-events: none;
  $durationTime: .3s;
  will-change: margin, opacity, transform;

  &.msg_bottom {
    bottom: 20rpx;

    .msg {
      margin-bottom: 20rpx;
    }

    .msg-enter-active,
    .msg-leave-active {
      @include transitionS('margin-bottom,opacity', $durationTime, ease);
      margin-bottom: 20rpx;
    }

    .msg-enter-from,
    .msg-leave-to {
      opacity: 0;
      margin-bottom: -100rpx;
    }
  }

  &.msg_top {
    top: 20rpx;

    .msg {
      margin-top: 20rpx;
    }

    .msg-enter-active,
    .msg-leave-active {
      @include transitionS('margin-top,opacity', $durationTime, ease);
      margin-top: 20rpx;
    }

    .msg-enter-from,
    .msg-leave-to {
      opacity: 0;
      margin-top: -100rpx;
    }
  }

  &.msg_left {
    top: 0;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    padding-left: 20rpx;

    .msg {
      margin-top: 20rpx;
    }

    .msg-enter-active,
    .msg-leave-active {
      @include transitionS('transform,opacity,margin-top', $durationTime, ease);
      margin-top: px(10);
      @include translateX(0);
    }

    .msg-enter-from,
    .msg-leave-to {
      opacity: 0;
      margin-top: -100rpx;
      @include translateX(-100%);
    }
  }

  &.msg_right {
    top: 0;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    padding-right: 20rpx;

    .msg {
      margin-top: 20rpx;
    }

    .msg-enter-active,
    .msg-leave-active {
      @include transitionS('transform,opacity,margin-top', $durationTime, ease);
      margin-top: 20rpx;
      @include translateX(0);
    }

    .msg-enter-from,
    .msg-leave-to {
      opacity: 0;
      margin-top: -100rpx;
      @include translateX(100%);
    }
  }

  &.msg_center {
    top: 0;
    height: 100%;
    align-items: center;
    justify-content: center;

    .msg {
      margin-top: 20rpx;
    }

    .msg-enter-active,
    .msg-leave-active {
      @include transitionS('margin-top,opacity', $durationTime, ease);
      margin-top: 20rpx;
    }

    .msg-enter-from,
    .msg-leave-to {
      opacity: 0;
      margin-top: -100rpx;
    }
  }

  li {
    max-width: 90%;
  }
}

.msg {
  display: inline-block;
  line-height: 1.5;
  border-radius: 20rpx;
  color: #fff;
  padding: 20rpx 20rpx;
  @include bgcolor(#000, 0.5);
  pointer-events: auto;
}

@function tenToSixteen($num) {
  $sixteen: "00",
  "01",
  "02",
  "03",
  "04",
  "05",
  "06",
  "07",
  "08",
  "09",
  "0A",
  "0B",
  "0C",
  "0D",
  "0E",
  "0F",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "1A",
  "1B",
  "1C",
  "1D",
  "1E",
  "1F",
  "20",
  "21",
  "22",
  "23",
  "24",
  "25",
  "26",
  "27",
  "28",
  "29",
  "2A",
  "2B",
  "2C",
  "2D",
  "2E",
  "2F",
  "30",
  "31",
  "32",
  "33",
  "34",
  "35",
  "36",
  "37",
  "38",
  "39",
  "3A",
  "3B",
  "3C",
  "3D",
  "3E",
  "3F",
  "40",
  "41",
  "42",
  "43",
  "44",
  "45",
  "46",
  "47",
  "48",
  "49",
  "4A",
  "4B",
  "4C",
  "4D",
  "4E",
  "4F",
  "50",
  "51",
  "52",
  "53",
  "54",
  "55",
  "56",
  "57",
  "58",
  "59",
  "5A",
  "5B",
  "5C",
  "5D",
  "5E",
  "5F",
  "60",
  "61",
  "62",
  "63",
  "64",
  "65",
  "66",
  "67",
  "68",
  "69",
  "6A",
  "6B",
  "6C",
  "6D",
  "6E",
  "6F",
  "70",
  "71",
  "72",
  "73",
  "74",
  "75",
  "76",
  "77",
  "78",
  "79",
  "7A",
  "7B",
  "7C",
  "7D",
  "7E",
  "7F",
  "80",
  "81",
  "82",
  "83",
  "84",
  "85",
  "86",
  "87",
  "88",
  "89",
  "8A",
  "8B",
  "8C",
  "8D",
  "8E",
  "8F",
  "90",
  "91",
  "92",
  "93",
  "94",
  "95",
  "96",
  "97",
  "98",
  "99",
  "9A",
  "9B",
  "9C",
  "9D",
  "9E",
  "9F",
  "A0",
  "A1",
  "A2",
  "A3",
  "A4",
  "A5",
  "A6",
  "A7",
  "A8",
  "A9",
  "AA",
  "AB",
  "AC",
  "AD",
  "AE",
  "AF",
  "B0",
  "B1",
  "B2",
  "B3",
  "B4",
  "B5",
  "B6",
  "B7",
  "B8",
  "B9",
  "BA",
  "BB",
  "BC",
  "BD",
  "BE",
  "BF",
  "C0",
  "C1",
  "C2",
  "C3",
  "C4",
  "C5",
  "C6",
  "C7",
  "C8",
  "C9",
  "CA",
  "CB",
  "CC",
  "CD",
  "CE",
  "CF",
  "D0",
  "D1",
  "D2",
  "D3",
  "D4",
  "D5",
  "D6",
  "D7",
  "D8",
  "D9",
  "DA",
  "DB",
  "DC",
  "DD",
  "DE",
  "DF",
  "E0",
  "E1",
  "E2",
  "E3",
  "E4",
  "E5",
  "E6",
  "E7",
  "E8",
  "E9",
  "EA",
  "EB",
  "EC",
  "ED",
  "EE",
  "EF",
  "F0",
  "F1",
  "F2",
  "F3",
  "F4",
  "F5",
  "F6",
  "F7",
  "F8",
  "F9",
  "FA",
  "FB",
  "FC",
  "FD",
  "FE",
  "FF";
  @return nth($sixteen, $num+1)
}